<template>
    <div class="container">
        <div class="box1">
            <div class="boxContent">
                <Title :title="'Tree View'"/>
                <div class="content" :style="{'height':'calc(100% - '+height+'px)'}" >
                    <Tree :svgId="'ori'" :getTree="getTree"/>
                </div>
            </div>
        </div>
        <div class="box2">
            <div class="boxContent">
                <Title :title="'Projection View'"/>
                <div class="content" :style="{'height':'calc(100% - '+height+'px)'}" >
                    <Projection/>
                </div>
            </div>
        </div>
        <div class="box3">
            <div class="boxContent">
                <Title :title="'Similar Tree View'">
                    <div class="btnBox">
                        <!-- <input type="button" value="NextOne" class="btnGroup" @click="nextClick">
                        <input type="button" value="LastOne" class="btnGroup" @click="lastClick"> -->
                        <select v-model="selectTreeId" @change="changeSimTree">
                            <option value="" disabled selected hidden>Similar Tree</option>
                            <option v-for="value in getChoosedTrees" :key="value.name" :value="value.name">
                                {{value.name}}
                            </option>
                        </select>
                    </div>
                </Title>
                <div class="content" :style="{'height':'calc(100% - '+height+'px)'}" >
                    <!-- <Compare :choosedTrees="getChoosedTrees" :Tree="getTree" ref="Compare" /> -->
                    <Tree :svgId="'sim'" :getTree="getTree2"/>
                </div>
            </div>
        </div>
        <div class="box4">
            <div class="boxContent">
                <Title :title="'Cluster View'"/>
                <div class="content" :style="{'height':'calc(100% - '+height+'px)'}">
                    <!-- <Ctree v-for="(item,key) in getClusters" :key="key" :Height="'25%'" :Width="'20%'"
                    :flag="0" :tree="getOverTree(item[0])"/> -->
                    <Cluster :representTree="getRepresentTree" :differentTrees="getDifferentyTrees" :differentTypes="getDifferentTypes"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Tree from '../components/Tree'
import Projection from '../components/Projection'
import Compare from '../components/Compare'
import DrawPanel from '../components/DrawPanel'
import Title from '../components/Title'
import Ctree from '../components/Ctree'
import Cluster from '../components/Cluster'

import {mapGetters,mapActions} from "vuex";
export default {
    name:'GraphPanel',
    components:{
        Tree,
        Projection,
        Compare,
        DrawPanel,
        Title,
        Ctree,
        Cluster,
    },
    computed:{
        ...mapGetters(['getChoosedTrees','getChoosedTreesByTreeEite','getClusters','getTrees','getRepresentTree',
        'getDifferentyTrees','getDifferentTypes','getTree','getTree2']),
        getOverTree:function(){
            return function (treeId){
                let tree={};
                for(let i=0;i<this.getTrees.length;i++){
                    if(this.getTrees[i].name==treeId){
                        console.log(treeId)
                        return this.getTrees[i]
                    }
                }
                return tree;
            }
        }
    },
    data(){
        return {
            height:this.$store.state.titleHeight,
            selectTreeId:'',
        }
    },
    methods:{
        ...mapActions(['updateTree2']),
        nextClick(){
            this.$refs.Compare.nextOne();
        },
        lastClick(){
            this.$refs.Compare.lastOne();
        },
        changeSimTree(){
            this.updateTree2(this.selectTreeId);
        }
    },

}
</script>

<style scoped>
.container{
    width:80%;
    height:100%;
    box-sizing: border-box;
    /* border:2px solid #000; */
    float:left;
}
.box1{
    width: 50%;
    height:50%;
    box-sizing: border-box;
    float:left;
    padding:5px 5px;
}
.box2{
    width: 50%;
    height:65%;
    box-sizing: border-box;
    float: right;
    padding:5px 5px;
}

.box3{
    width: 50%;
    height:50%;
    box-sizing: border-box;
    float:left;
    padding:5px 5px;
}

.box4{
    width: 50%;
    height:35%;
    box-sizing: border-box;
    float: right;
    padding:5px 5px;
}
.content{
    width:100%;
}
</style>